<template>
  <u-popup :show="sort">
    <view class="sort-list">
      <view
        class="sort-item"
        v-for="item in sortList"
        @click="changeSort(item)"
        :key="item.value"
      >
        <view class="sort-name">{{ item.label }}</view>
        <view class="sort-icon">
          <u-icon v-if="item.value == selectSort" name="checkbox-mark"></u-icon>
        </view>
      </view>
      <view class="sort-item" @click="closeSort">
        <view class="sort-name">取消</view>
      </view>
    </view>
  </u-popup>
</template>

<script>
export default {
  data() {
    return {
      // 排序列表
      sortList: [
        {
          label: '降序',
          value: 1,
        },
        {
          label: '升序',
          value: 2,
        },
      ],

      selectSort: 1, // 当前选择的排序
      sort: false,
    }
  },
  methods: {
    // 切换排序
    changeSort(item) {
      this.selectSort = item.value
      // this.updataList()
      this.$emit('change', item)
      this.sort = false
    },
    // 显示时间排序
    showSort() {
      this.sort = true
    },
    // 关闭时间排序
    closeSort(item) {
      this.sort = false
    },
  },
}
</script>

<style lang="scss" scoped>
.sort-list {
  // border-radius: 20rpx;
  // overflow: hidden;
  background-color: #0c0c0b;
  .sort-item {
    height: 100rpx;
    background-color: #232428;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    .sort-name {
      color: #fff;
    }
    .sort-icon {
      position: absolute;
      right: 300rpx;
    }
    &:first-child {
      border-radius: 20rpx 20rpx 0 0;
      overflow: hidden;
      margin-bottom: 2rpx;
    }
    &:nth-child(2) {
      margin-bottom: 20rpx;
    }
  }
}
</style>
